<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴相册设计</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Accordion Gallery</h1>
<div class="accordion">
  <!-- 在这里我们需要复制5个一样的代码，并修改内容 -->
  <ul>
    <li tabindex="1">
      <div>
        <a href="#">
          <h2>Bagel</h2>
          <p>The harder the crust is baked, the stronger the flavor and texture of the bread inside.</p>
        </a>
      </div>
    </li>

    <li tabindex="2">
      <div>
        <a href="#">
         <h2>Cup Cake</h2>
         <p>Cupcake is a dessert.</p>
        </a>
      </div>
    </li>

    <li tabindex="3">
      <div>
        <a href="#">
          <h2>Chocolate Cake</h2>
          <p>It is commonly used in birthday parties and weddings and is one of the common desserts.</p>
        </a>
      </div>
    </li>

    <li tabindex="4">
      <div>
        <a href="#">
          <h2>Light Food</h2>
          <p>The cooking method of food materials is simple, and the original nutrition and taste of food materials are retained.</p>
        </a>
      </div>
    </li>

    <li tabindex="5">
      <div>
        <a href="#">
          <h2>Sashimi</h2>
          <p>Sashimi refers to raw fish and other things, dipped in seasoning directly edible fish dishes.</p>
        </a>
      </div>
    </li>

    <li tabindex="6">
      <div>
        <a href="#">
          <h2>Xaman Beer</h2>
          <p>Guatemalan handcrafted Xaman beer bottle.</p>
        </a>
      </div>
    </li>
  </ul>
</div>
<p class="about">
  By <a href="https://Lavender-z.github.io/">橘子</a>
</p>
</body>
</html>